<template>
  <div class="header">
    <el-icon size="30" @click="foldClickMenu" class="icon"
      ><Fold v-if="!isFold" />
      <Expand v-else />
    </el-icon>

    <div class="content">
      <div class="breadCrumb">
        <nav-breadcrumb :breadcrumbs="breadcrumbs"></nav-breadcrumb>
      </div>
      <div class="userInfo">
        <user-info></user-info>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from '@/store'
import navBreadcrumb from './components/nav-breadcrumb.vue'
import userInfo from './components/user-info.vue'
import { pathMapBreadcrumbs } from '@/utils'
const store = useStore()
const route = useRoute()
const isFold = ref(false) //默认false代表不折叠
const emit = defineEmits(['isFold'])
function foldClickMenu() {
  isFold.value = !isFold.value
  emit('isFold', isFold.value)
}

const breadcrumbs = computed(() => {
  // 将路径和方法关联 每次跳转会重新触发computed方法
  const currentPath = route.path
  const userMenus = store.state.login.userMenus
  return pathMapBreadcrumbs(userMenus, currentPath)
})
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  display: flex;
  .icon {
    cursor: pointer;
  }

  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 20px;
  }
}
</style>
